<template>
    <div v-loading="loading" v-auto-resize ref="chartEl" class="chart-wrap" :style="[{ height }]" />
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'

export default {
  name: 'ChartBarLine',
  props: {
    height: {
      type: String,
      default: '28vh'
    },
    option: {
      title: Object,
      default: () => {
        return {}
      }
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  mixins: [EchartsBase],
  directives: {
    AutoResize
  },
  data () {
    return {
      oChart: null,
      loading: true
    }
  },
  watch: {
    data (newList) {
      this.setOption(newList)
    }
  },
  created () {
    this.$nextTick().then(() => {
      this.oChart = echarts.init(this.$refs.chartEl)
      this.setOption()
    })
  },
  methods: {
    setOption (list = []) {
      const { legend = [], specialColor = false } = this.option
      const color1 = '#d3d5da'
      const axisBasic = {
        splitLine: {
          show: true,
          lineStyle: {
            color: color1,
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        }
      }
      const yAxisBasic = {
        ...axisBasic,
        axisLine: {
          lineStyle: {
            color: color1
          }
        }
      }
      const seriseData = [
        {
          name: legend[0],
          type: 'bar',
          stack: '1',
          data: []
        },
        {
          name: legend[1],
          type: 'bar',
          stack: '1',
          data: []
        }
      ]
      const xAxisData = []
      // eslint-disable-next-line camelcase
      for (const { xAxis, value1 = 0, value2 = 0 } of list) {
        // eslint-disable-next-line camelcase
        xAxisData.push(xAxis)
        seriseData[0].data.push(value1)
        seriseData[1].data.push(value2)
      }
      const option = {
        ...axisBasic,
        title: {
          text: this.option.title,
          left: 'center'
        },
        color: specialColor ? ['red', 'green'] : ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247'],
        tooltip: {},
        legend: {
          data: legend,
          bottom: '4%'
        },
        grid: {
          containLabel: true
        },
        xAxis: [
          {
            ...axisBasic,
            type: 'category',
            axisLine: {
              onZero: true
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            ...yAxisBasic,
            type: 'value',
            axisLabel: {
              color: '#333',
              formatter: '{value}'
            }
          },
          {
            ...yAxisBasic,
            type: 'value',
            axisLabel: {
              color: '#333',
              formatter: '{value} %'
            }
          }
        ],
        series: seriseData
      }
      this.oChart.setOption(option)
    }
  }
}
</script>

<style scoped>
    .chart-wrap {
        width: 100%;
        height: 100%;
    }
</style>
